<template>
  <div>
    <!-- 模板中不用.value, 因为编译模板中会自动.value -->
    <h2>count: {{count}}</h2>
    <h2>double: {{double}}</h2>
    <h2 @click="double2 += 1">double2: {{double2}}</h2>
    <button @click="update">更新</button>
  </div>
</template>


<script lang="ts">
  import {
    ref,
    computed
  } from 'vue'
  export default {
    name: 'About',

    setup () {
      // 创建一个ref响应式数据对象
      const count = ref(1)
      console.log('ref', count)

      // 创建一个计算属性(只有getter)
      const double = computed(() => {
        console.log('double getter')
        return count.value * 2
      })
      console.log('computed', double)
      
      // 创建一个计算属性(getter和setter)
      const double2 = computed<number>({
        get () {
          console.log('double2 getter')
          return count.value * 3
        },

        set (value) {
          console.log('double2 setter', value)
        }
      })

      function update () {
        // console.log(double.value)
        count.value = count.value + 1

        // double2.value = double2.value + 1
      }

      return { // 返回对象中的所有属性和方法模板中可以直接使用
        count,
        double,
        double2,
        update
      }
    }
  }
</script>